<template>
  <div class="ee">
    <a-form :form="form">
      <a-form-item
        label="补货时间"
        :label-col="{ span: 3}"
        :wrapper-col="{ span: 16, offset:1}"
      >{{ this.$store.state.replenishmentTime }}</a-form-item>

      <a-form-item
        label="巡柜员"
        :label-col="{ span: 3}"
        :wrapper-col="{ span: 16, offset:1}"
      >{{ this.$store.state.employeeName }}</a-form-item>
      <a-form-item label="回库状态" :label-col="{ span: 3}" :wrapper-col="{ span: 12, offset:1}">
        <a-select v-decorator="['status']" placeholder="请选择">
          <a-select-option :value="1">待回库</a-select-option>
          <a-select-option :value="3">已回库</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="待补货设备" :label-col="{ span: 3}">{{ this.$store.state.devCode }}</a-form-item>
      <a-form-item label="待补货设备地址" :label-col="{ span: 3}">{{ this.$store.state.posAddr}}</a-form-item>
      <a-form-item label="回库单商品详情" :label-col="{ span: 3 }" :wrapper-col="{}">
        <a-table
          class="tb"
          :columns="columns"
          :dataSource="data"
          :bordered="true"
          :pagination="false"
          :rowKey="record => record.goodsId"
        >
          <template slot="name" slot-scope="text" href="javascript:;">{{text}}</template>
        </a-table>
      </a-form-item>

      <a-form-item label="备注" :label-col="{ span: 2}" :wrapper-col="{span: 22}">
        <a-textarea v-decorator="['remark']" :autosize="{ minRows: 2, maxRows: 10 }" />
      </a-form-item>
    </a-form>
    <div style="text-align:right">
      <router-link to="/home/repertoryadmin/backinvoice">
        <a-button type="dashed">取消</a-button>
      </router-link>
      <a-button type="primary" @click="edit()">确定</a-button>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    //dataindex是用来渲染数据的
    dataIndex: "goodsName",
    title: "商品名称",
    align: "center"
  },
  {
    dataIndex: "inboundNum",
    title: "数量",
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];
export default {
  data() {
    return {
      expand: false,
      form: this.$form.createForm(this),
      columns,
      data: []
    };
  },
  methods: {
    //回货单详情-回货清单
    detailInboundList() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/inboundOrder/detailInboundList", {
          loginToken: this.$store.state.loginToken,
          inboundOrderId: this.$store.state.inboundOrderId,
          replenishmentOrderId: this.$store.state.replenishmentOrderId
        })
        .then(response => {
          // console.log(response);
          this.form.setFieldsValue({
            status: this.$store.state.backStatus,
            remark: this.$store.state.remark
          });
          this.data = response.data.data;
        });
    },

    //回货单编辑
    edit() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/inboundOrder/edit", {
          loginToken: this.$store.state.loginToken,
          inboundOrderId: this.$store.state.inboundOrderId,
          remark: values.remark,
          status: values.status
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$router.push({
              path: "/home/repertoryadmin/backinvoice"
            });
            this.$message.info("编辑成功");
          }
        });
    }
  },
  created() {
    this.detailInboundList();
  }
};
</script>

<style>
.ee {
  width: 100%;
}
.tb {
  margin-left: 130px;
  /* margin-top: -10px; */
}
</style>
